<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="cz.css">
    <link rel="stylesheet" href="../项目1/cheng/first-project/header/header.css">
    <link rel="stylesheet" href="../项目1/cheng/first-project/footer/footer.css">
    <link rel="stylesheet" href="../项目1/cheng/first-project/ysy.css">
    <link rel="stylesheet" href="./font_4v9f6m58m1r/iconfont.css">
    <script src="./until.js"></script>
</head>
<body>
    <header>
        <!-- 头部小黑条 -->
       <div class="top_blackLine"></div>
       <div class="header_top wrapper" id="header">   
           <div class="header_top_main fl-j">
               <h1>CHANEL</h1>
               <!-- 右边四个图标 -->
               <div class="header_top_main_youbian">
                   <ul class="fl-spaceA">
                       <li><a href="#javascript"><i class="iconfont icon-sousuo"></i></a></li>
                       <li><a href="#javascript"><i class="iconfont icon-wode"></i></a></li>
                       <li>
                           <i class="iconfont icon-dizhi"></i>
                           <!-- 地址的二级菜单 -->
                           <div class="dizhi_erji">
                               <div>
                                   <p>寻找销售店铺</p>
                                   <div class="fl-center">
                                       <i class="iconfont icon-dingwei"></i>
                                       <span>所在地</span>
                                   </div>
                                   <div class="fl" style="width: 100%; height: 40px;">
                                       <input type="text" placeholder="城市/城市" style="width:250px ;">
                                       <div style="width:40px; height:40px; line-height: 40px; text-align:center; margin-top: 0;">
                                           <i class="iconfont icon-sousuo"></i>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </li>
                       <li><a href="#javascript"><i class="iconfont icon-24gl-bag2"></i></a></li>
                   </ul>
               </div>
           </div>
       </div>
    
       <div class="header_bottom wrapper" id="">
           <nav>
               <ul class="fl-spaceA">
                   <!-- zhanKai 展开二级菜单 -->
                   <li class="zhanKai" id="zhankai" >
                       <a href="#javascript" >香水</a>
                       <!-- erji  二级菜单 -->
                       <div class="erji" id="erji">
                           <div>
                               <div>
                                   <h6><a href="#javascript">精选系列</a></h6>
                                   <div><a href="#javascript">珍藏系列香水</a></div>
                                   <div><a href="#javascript">香奈儿可可小姐香水</a></div>
                                   <div><a href="#javascript">香奈儿5号</a></div>
                                   <div><a href="#javascript">香奈儿梧桐影木香精高级手工坊礼盒</a></div>
                               </div>
                               <div class="margin-t60">
                                   <h6><a href="#javascript">明星系列</a></h6>
                                   <div><a href="#javascript">香奈儿身体洗护剂</a></div>
                                   <div><a href="#javascript">香水的造艺</a></div>
                                   <div><a href="#javascript">新品资讯</a></div>
                                   <div><a href="#javascript">男士精选</a></div>
                                   <div><a href="#javascript">细节艺术</a></div>
                               </div>
                           </div>
    
                           <div>
                               <h6><a href="#javascript">女士香水</a></h6>
                               <div><a href="#javascript">5号香水系列</a></div>
                               <div><a href="#javascript">可可小姐香水系列</a></div>  
                               <div><a href="#javascript">嘉柏丽尔香水系列</a></div>
                               <div><a href="#javascript">邂逅香水系列</a></div>
                               <div><a href="#javascript">邂逅清新香水系列</a></div>
                               <div><a href="#javascript">邂逅柔情香水系列</a></div>
                               <div><a href="#javascript">邂逅活力香水系列</a></div>
                               <div><a href="#javascript">可可小姐黑色香水系列</a></div>
                               <div><a href="#javascript">可可香水系列</a></div>
                               <div><a href="#javascript">魅力香水系列</a></div>
                               <div><a href="#javascript">感性魅力香水系列</a></div>
                               <div><a href="#javascript">十九号香水系列</a></div>
                               <div><a href="#javascript">水晶恋香水系列</a></div>
                               <div><a href="#javascript">香奈儿之水珍藏系列香水</a></div>
                           </div>
    
                           <div>
                               <h6><a href="#javascript">男士香水</a></h6>
                               <div><a href="#javascript">蔚蓝男士香水系列</a></div>
                               <div><a href="#javascript">男士运动香水系列</a></div>
                               <div><a href="#javascript">男士极限运动香水系列</a></div>
                               <div><a href="#javascript">男士香水系列</a></div>
                               <div><a href="#javascript">白色魅力精粹男士香水系列</a></div>
                               <div><a href="#javascript">白金男性香水系列</a></div>
                               <div><a href="#javascript">自我男性香水系列</a></div>
                               <div><a href="#javascript">绅士男性香水系列</a></div>
                               <div><a href="#javascript">力度男性香水系列</a></div>
                               <div><a href="#javascript">香奈儿之水</a></div>
                               <div><a href="#javascript">珍藏系列香水</a></div>
                           </div>
    
                           <div>
                               <h6><a href="#javascript">套组</a></h6>
                               <div><a href="#javascript">礼物套组</a></div>
                           </div>
                           
                           <div>
                               <span>
                                   <a href="#javascript"  id="close">X</a>
                               </span>
                           </div>
                       </div>
                   </li>
                   <li><a href="#javascript">彩妆</a></li>
                   <li><a href="#javascript">护肤品</a></li>
                   <li><a href="#javascript"  class="red">N°1 de CHANEL</a></li>
               </ul>
           </nav>
       </div>
    </header>
    
    <main>
    <section class="section1 ">
        <div class="bj1">
            <img src="images/mljccg.jpg">
            <h1>魅力精萃唇膏</h1>
            <p>香奈儿魅力精萃唇膏，一抹释放魅力，尽显风格本质。</p>
            <button>立即购买</button>
            <button class="xn">虚拟试色</button>
        </div>
        <div class="bj2">
            <img class="mn" src="images/cg mn.jpg"/>
        </div>
        <div class="bj3">
            <img src="images/cg jyse.jpg">
                <h2>惊艳色泽 精萃养唇</h2>
                <p>精萃滋润配方，融合浓烈色彩与夺目光泽。柔滑舒适的质地，
                触肤即融，带来持久润泽与防护。20款缎光色彩，
                打造鲜明亮泽的浓郁唇妆。
                </p>
                <button>立即购买</button>
                <button class="xn">虚拟试色</button>
        </div>
        <div class="bj4">
            <img class="cc" src="images/cg d.jpg"/>
        </div>
        <div class="bj5">
            <img src="images/ch.png">
            <h3>内外皆美</h3>
                <p>简便而创新的设计。轻轻一按，即可将替换芯装入造型纤细的标志性黑金管身中
                </p>
                <button>查看替换芯</button>
        </div>
        <div class="bj6">
            <img class="cg_ch" src="images/cg ch.jpg">
        </div>
        <div class="bj7">
            <img class="cg_mn" src="images/ch mn.png">
        </div>
    </section>

    <div class="section_nine">
        <h2>探索香奈儿魅力精萃唇膏</h2>
        <!-- 大盒子都给装起来 -->
        <div class="fl wrapper">
            <!-- 左边一列盒子 -->
            <div class="w50">
                <!-- 第一个盒子 -->
                <div class="fl">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="images/862.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right headerline">
                        <p>
                            <a href="#javascript" class="f-20">ROUGE ALLURE L'EXTRAIT</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿魅力精萃唇膏</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="images/862x.jpg" alt="" class="xiangsudian">
                                <span>862</span>
                            </div>
                            <p>￥ 470.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
                <!-- 第二个盒子 -->
                <div class="fl margin-t30">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="images/818.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20">ROUGE ALLURE L'EXTRAIT</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿魅力精萃唇膏</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="images/818x.jpg" alt="" class="xiangsudian">
                                <span>818</span>
                            </div>
                            <p>￥ 470.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
                <!-- 第三个盒子 -->
                <div class="fl margin-t30">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="images/862 2.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20">ROUGE ALLURE L'EXTRAIT</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿魅力精萃唇膏</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="images/862 2x.jpg" alt="" class="xiangsudian">
                                <span>862</span>
                            </div>
                            <p>￥ 350.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
                <!-- 第四个盒子 -->
                
            </div>



            <!-- 右边一列盒子 -->
            <div class="w50">
                <div class="fl">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="images/864.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20">ROUGE ALLURE L'EXTRAIT</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿魅力精萃唇膏</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="images/864x.jpg" alt="" class="xiangsudian">
                                <span>864</span>
                            </div>
                            <p>￥ 470.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
                <!-- 第二个盒子 -->
                <div class="fl margin-t30">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="images/814.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20">ROUGE ALLURE L'EXTRAIT</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿魅力精萃唇膏</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="images/814x.jpg" alt="" class="xiangsudian">
                                <span>814</span>
                            </div>
                            <p>￥ 470.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 客服 -->
        <div class="kefu wrapper fl-spaceA" style="margin-top:100px;">
            <div>
                <h4>线上客服</h4>
                <p>香奈儿线上专门店客服团队将竭诚为您服务,请联系线上美容顾问
                    或致电 4009-555-888，工作时间每日上午9点至晚上24点。</p>
            </div>
            <div>
                <h4>购买</h4>
                <p>每笔订单均附赠指定体验装。</p>
                <p>并享受免费订单配送。</p>
            </div>
            <div>
                <h4>最新资讯</h4>
                <p>订阅香奈儿最新资讯：限量创作系列，到心意好礼，尽在掌握。</p>
                <button>订阅</button>
            </div>
        </div>
    </div>
    <section class="section6">
        <div>
            <div>
                <div>
                    <p>线上美容顾问</p>
                    <div><span class="iconfont icon-arrowup"></span></div>
                </div>
                <div>
                    <p>CHANEL</p>
                    <div><span class="iconfont icon-arrowdown"></span></div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <p>为履行法律义务，更好的为您提供服务，我们肯恩会保留，核实并且使用您与我沟通的内容。</p>
                                    <p>我们鼓励您定期查阅以下隐私政策：</p>
                                    <p>http://www.chanel.com/-412a</p>
                                </div>
                                <div>
                                    <p>请您选择问题类型：</p>
                                    <p>1.产品咨询</p>
                                    <p>2.售后服务</p>
                                    <p>3.尊享会员</p>
                                    <p>4.店铺咨询</p>
                                    <p>【可直接输入序号】</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <input type="text" name="" id="">
                    <div>
                        <span class="iconfont icon-picture"></span>
                        <span>发送</span>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </section>
</main>
    <footer>
        <!-- <div class=".footer_firstDiv"> -->
        <!-- 上 -->
        <div class="footer_top">
            <h1><a href="#javascript">CHANEL</a></h1>
        </div>  
        <!-- 中 -->
        <div class="footer_middle">
            <ul class="fl-spaceB">
                <li>
                    <h2><a href="#javascript">前往 CHANEL.com</a></h2>
                    <p><a href="#javascript">高级定制服</a></p>
                    <p><a href="#javascript">精品</a></p>
                    <p><a href="#javascript">腕表</a></p>
                    <p><a href="#javascript">高级珠宝</a></p>        
                </li>
                <li>
                    <h2><a href="#javascript">香奈儿与您</a></h2>
                    <p><a href="#javascript">隐私政策</a></p>
                    <p><a href="#javascript">法律声明</a></p>
                    <p><a href="#javascript">Inside CHANEL</a></p>
                    <p><a href="#javascript">工作机会</a></p>
                    <p><a href="#javascript">Fondation CHANEL</a></p>
                    <p><a href="#javascript">CHANEL News</a></p>
                </li>
                <li>
                    <h2><a href="#javascript">销售店铺查询</a></h2>
                    <p><a href="#javascript">寻找销售店铺</a></p>
                </li>
                <li>
                    <h2><a href="#javascript">服务</a></h2>
                    <p><a href="#javascript">近期活动</a></p>
                    <p><a href="#javascript">FAQ</a></p>
                    <p><a href="#javascript">线上专属服务</a></p>
                    <p><a href="#javascript">联系我们</a></p>
                    <p><a href="#javascript">订阅品牌资讯</a></p>
                </li>
            </ul>
        </div>
        <!-- 下 -->
        <div class="footer_bottom fl-spaceB">
    
            <!-- 左 -->
            <div class="fl-spaceB footer_bottom_left">
                <img src="images/logo1.png" class="logo1">
                <img src="images/logo2.png" class="logo2">
                <p>上海工商</p>
                <p>沪ICP备09005344号</p>
                <p>沪公网安备 </p>
                <p>31010602002483号</p>
            </div>
            <!-- 右 -->
            <div class="fl-right footer_bottom_right">
                <div class="fl">
                    <p id="gray">Languages</p>
                    <p>中国大陆</p>
                </div>
                <div class="fl-a">
                    <i class="iconfont icon-xinlangweibo"></i>
                    <span><a href="#javascript">rk</a></span>
                </div>
            </div>
        </div>
    <!-- </div> -->
    </footer>
</body>
<script>
    let header = document.getElementById(('header'));
    let headerTwo = document.querySelector('#scroll');
    let close = document.getElementById('close');
    let erji = document.getElementById('erji');
    let zhankai = document.getElementById('zhankai');
    close.addEventListener('click',()=>{
        erji.style.display = 'none';
    })
    zhankai.addEventListener('mousemove',()=>{
        erji.style.display = 'block';
    })
    zhankai.addEventListener('mouseout',()=>{
        erji.style.display = 'none';
    })

    window.onscroll = function(){
        const offsetY = getScrollOffset().y;
        console.log(offsetY);
        if(offsetY>=6533){
            header.style.display = 'none';
        }
        else{
            header.style.display = 'block';
        }
    }
</script>
</html>